<!DOCTYPE html>
<html >
<head>
	<title>Sails Socket Demo - Maangalabs</title>
	<link rel="stylesheet" type="text/css" href="/styles/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/styles/style.css">
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
</head>
<body ng-app="socketApp" ng-controller="ChatController">

	<div class="navbar navbar-default navbar-fixed-top">
		<div class="navbar-header">
	    	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
	    		<span class="icon-bar"></span>
	    		<span class="icon-bar"></span>
	    		<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">Chat System V1.0</a>
		</div>
		 <div class="navbar-collapse collapse navbar-responsive-collapse">
		  </div>
	</div>
	<div class="col-md-12" style="padding:100px">
		<table  class="table">
			<tr class="chat_message" ng-repeat="chat in chatList | orderBy:predicate:reverse | limitTo: 15">
				<td class="col-md-12 td_class"><strong>{{ chat.user }} : </strong> {{ chat.message }}</td>
			</tr>
		</table>

	</div>

	<div class="navbar navbar-inverse navbar-fixed-bottom" >
	  <div class="col-lg-12">

	    <form class="form_chat">
	    	<div class="col-lg-4 col-md-3">
	      		<input type="text" ng-model = "chatUser" class="form-control" placeholder="TypeYourNameHere">
          	</div>

	    	<div class="col-lg-6 col-md-5">
	      		<input type="text" ng-model = "chatMessage" class="form-control" placeholder="TypeYourMessageHere">
          	</div>
          	<button class="btn btn-default col-lg-2 col-md-2" ng-click="sendMsg()">Send</button>
	    </form>

	  </div>
	</div>
	<script type="text/javascript" src="/js/dependencies/sails.io.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
	<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>
